<template>
  <div id="assetDetails">
    <Headers/>
    <div class="detail-comunt">
      <ul class="comunt-container">
        <li class="type-name">{{typeName}}</li>
        <li class="money-count">{{moneyCount}}</li>
        <li class="count">{{count}}</li>
      </ul>
      <div class="petroleum" @click="openPetroleum">
        <div>
          <p>{{$t("asset.assetsDetail.openSYB1")}}</p>
          <p>{{$t("asset.assetsDetail.openSYB2")}}</p>
        </div>
      </div>
    </div>
    <ul class="selectBtn">
      <li
        v-for="(item,index) in selectBtns"
        :class="item.className"
        @click="item.eventName"
        :style="`background:url(${item.iconBg})no-repeat center center`"
        :key="index"
      >{{item.btnName}}</li>
    </ul>
    <div class="recent-trading">
      <span>{{$t("asset.assetsDetail.transactions")}}</span>
    </div>
    <List :lists="lists" @click="detailsEvent"/>
  </div>
</template>

<script>
import List from "components/Lists";
export default {
  name: "assetDetails",
  data() {
    return {
      typeName: "",
      moneyCount: "125.000",
      count: "0.00",
      selectBtns: [
        {
          iconBg: require("assets/collection-bg.png"),
          btnName: this.$t("asset.assetsDetail.collection"),
          className: "collection",
          eventName: this.collection
        },
        {
          iconBg: require("assets/conversion-bg.png"),
          btnName: this.$t("asset.assetsDetail.conversion"),
          className: "conversion",
          eventName: this.conversion
        },
        {
          iconBg: require("assets/pay-bg.png"),
          btnName: this.$t("asset.assetsDetail.pay"),
          className: "pay",
          eventName: this.pay
        }
      ],
      lists: {
        type: "details",
        listArray: [
          {
            icon: require("../../assets/conver_icon.png"),
            date: "2019-1-3 14:00:37",
            status: this.$t("asset.assetsDetail.conversion") + "ETH",
            money: "+150.00",
            color: "#FFFFFF"
          },
          {
            icon: require("../../assets/payicon.png"),
            date: "2019-1-3 14:00:37",
            status: this.$t("asset.assetsDetail.pay"),
            money: "-150.00",
            color: "#F55685"
          },
          {
            icon: require("../../assets/coll_icon.png"),
            date: "2019-1-3 14:00:37",
            status: this.$t("asset.assetsDetail.collection"),
            money: "+150.00",
            color: "#01F8EF"
          }
        ]
      }
    };
  },
  methods: {
    openPetroleum() {
      this.$router.push("/oil");
    },
    collection() {
      this.$router.push("/receipt");
    },
    conversion() {
      this.$router.push("/conversion");
    },
    pay() {
      this.$router.push("/pay");
    },
    detailsEvent() {
      alert(11);
    }
  },
  components: {
    List
  },
  mounted() {
    this.typeName = this.$route.query.type;
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#assetDetails
  positCenter(0, 0, 0, 0, 0, 0)
  background-color $bodyBg
  width 100%
  .detail-comunt
    width 100%
    height rem(334)
    bgImg('../../assets/detailsBg.png', contain)
    .comunt-container
      width rem(237)
      height rem(237)
      padding-top rem(79)
      margin 0 auto
      bgImg('../../assets/detailComunt.png', contain)
      background-position center bottom
      display flex
      flex-direction column
      justify-content center
      li
        width 100%
        color $fontColor
      .type-name
        color $typeColor
        font-size rem(20)
      .money-count
        font-size rem(30)
        line-height rem(40)
        font-weight bold
        padding rem(10) 0
      .count
        color #C7C7C7
        font-size rem(20)
    .petroleum
      position absolute
      top rem(43)
      right rem(22)
      width rem(87)
      height rem(87)
      bgImg('../../assets/petroleum.png', contain)
      div
        margin rem(25) 0 0 rem(-4)
        p
          text-align center
          color $fontColor
          font-size rem(12)
          line-height rem(14)
  .selectBtn
    margin-top rem(10)
    display flex
    flex-direction row
    justify-content space-around
    align-items flex-end
    li
      background-size contain !important
      font-size rem(15)
      color $fontColor
    .collection, .pay
      width rem(69)
      height rem(69)
      line-height rem(60)
    .conversion
      width rem(81)
      height rem(81)
      line-height rem(70)
  .recent-trading
    margin rem(12) 0 rem(20)
    text-align left
    color #fff
    span
      width rem(84)
      line-height rem(27)
      background-color $listBg
      font-size rem(14)
      color $colors
      display block
      padding-left rem(30)
      border-top-right-radius rem(25)
      border-bottom-right-radius rem(25)
</style>
